<template>
  <div class="container">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="排列三一号表" name="first">
          <el-container class="content">
            <el-header height="100%">
              <div class="header_content">
                <ul>
                  <li v-for="(item,index) in list" :key="index" @click="onItem(index)"><div>{{item}}</div></li>
                </ul>
              </div>
            </el-header>
            <el-container>
              <el-aside width="140px">手工筛选</el-aside>
              <!-- 手动筛选内容 -->
              <el-main>
                  <el-container>
                    <!-- 标题 -->
                    <el-header class="manual_header" height="50px">
                       <span class="manual_header_text">6.手工筛选</span>
                    </el-header>
                    <!-- 手动筛选过的数据 -->
                    <el-main>
                      <div class="main_box">
                        <div class="main_content">
                          <ul>
                            <li v-for="(item,index2) in selectList" :key="index2"><div>{{item}}</div></li>
                          </ul>
                        </div>
                      </div>
                    </el-main>
                  </el-container>
              </el-main>
            </el-container>
          </el-container>

          <!-- 底部按钮 -->
          <div class="bottom">
            <el-button type="primary" @click="goBack">上一步</el-button>
            <el-button type="primary" @click="goNext">下一步</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="排列三二号表" name="second">
          <el-container class="content">
            <el-header height="100%">
              <div class="header_content">
                <ul>
                  <li v-for="(item,index) in list" :key="index" @click="onItem(index)"><div>{{item}}</div></li>
                </ul>
              </div>
            </el-header>
            <el-container>
              <el-aside width="140px">手工筛选</el-aside>
              <!-- 手动筛选内容 -->
              <el-main>
                  <el-container>
                    <!-- 标题 -->
                    <el-header class="manual_header" height="50px">
                       <span class="manual_header_text">6.手工筛选</span>
                    </el-header>
                    <!-- 手动筛选过的数据 -->
                    <el-main>
                      <div class="main_box">
                        <div class="main_content">
                          <ul>
                            <li v-for="(item,index2) in selectList" :key="index2"><div>{{item}}</div></li>
                          </ul>
                        </div>
                      </div>
                    </el-main>
                  </el-container>
              </el-main>
            </el-container>
          </el-container>

          <!-- 底部按钮 -->
          <div class="bottom">
            <el-button type="primary" @click="goBack">上一步</el-button>
            <el-button type="primary" @click="goNext">下一步</el-button>
          </div>

        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        activeName: 'first',
        dataList:[],  // 获取的数据
        list:[],  // 显示的号码数据
        selectList:[], // 选中的号码数据
        type:0,
      };
    },
    created() {
       var activeName = this.$route.query.activeName;
       var type = this.$route.query.type;
       this.activeName = activeName;
       this.type = type;
       this.loadData();

    },

    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
        this.activeName = tab.name;
        this.list = [];
        this.dataList = [];
        this.loadData()
      },

      loadData() {

        if (this.activeName == 'first') {
          if (this.type == 1) {
            var dataJson = window.localStorage.getItem("forwardfilterData");
            this.dataList = eval(dataJson);
          } else if (this.type == 2) {
            var dataJson = window.localStorage.getItem("middlefilterData");
            this.dataList = eval(dataJson);
          } else {
            var dataJson = window.localStorage.getItem("filterData");
            this.dataList = eval(dataJson);
          }
          this.setNumberList();

        }else {
          if (this.type == 1) {
            var dataJson = window.localStorage.getItem("forwardfilterData2");
            this.dataList = eval(dataJson);
          } else if (this.type == 2) {
            var dataJson = window.localStorage.getItem("middlefilterData2");
            this.dataList = eval(dataJson);
          } else {
            var dataJson = window.localStorage.getItem("filterData2");
            this.dataList = eval(dataJson);
          }
          this.setNumberList();

        }
      },


      // 设置显示号码
      setNumberList(){
        if (this.dataList) {
          for (var i = 0; i < this.dataList.length; i++) {
             let item =  this.dataList[i];
             this.list.push(item.ticket);
          }
        }
      },



      // 点击号码
      onItem(index) {
         var number = this.list[index];
          console.log(number);
         var idx = this.selectList.indexOf(number);
         if (idx>-1) {
           // this.selectList.splice(idx,1);
         }else {
           this.selectList.push(number);
         }
         var idx2 = this.list.indexOf(number);
         this.list.splice(idx2,1);
         console.log(this.list);

      },

      // 返回上一页
      goBack() {
        this.$router.back();

      },

      // 跳转下一页
      goNext() {

        if (this.activeName == 'first') {
          if (this.type == 1) {
            window.localStorage.setItem("selectdwjoForwardList",JSON.stringify(this.list));
          } else if (this.type == 2) {
            window.localStorage.setItem("selectdwjoMiddleList",JSON.stringify(this.list));
          } else {
            window.localStorage.setItem("selectdwjoList",JSON.stringify(this.list));
          }
        }else {
          if (this.type == 1) {
            window.localStorage.setItem("selectdwjoForwardList2",JSON.stringify(this.list));
          } else if (this.type == 2) {
            window.localStorage.setItem("selectdwjoMiddleList2",JSON.stringify(this.list));
          } else {
            window.localStorage.setItem("selectdwjoList2",JSON.stringify(this.list));
          }
        }
        this.$router.push({path:'/home/rankThreeResult',query: {activeName:this.activeName,type: this.type}})
      }
    }

  }
</script>

<style scoped="scoped">
  .container {
    height: 100%;
  }

  .content {
    border: 1px solid #2676C2;
  }

  .header_content {
    margin: 0px 20px;
    display: inline-block;
     min-height: 200px;
    /* background-color: green; */
  }

  .manual_header_text {
    margin-left: 15px;
  }
  ul{
       overflow: hidden;
       width: 100%;
       padding: 0;
       /* background: red; */
     }
     li{
       list-style: none;
       float: left;
       width: 60px;/*可以用百分比*/
       height: 20px;/*可以用百分比*/
       margin-bottom: 10px;
       /* border: 1px solid red; */

     }
     li  > div{
       background: #eee;
       margin: 0 10px;
       border-radius: 4px;
       text-align: center;
       line-height: 20px;
       color: #2676C2;
       border: 1px solid #999999;

     }

  .el-header {
    border-bottom-style: solid;
    border-color: #2676C2;
    border-width: 1px;
    padding: 0;
    margin: 0;

  }

  .el-aside {
    background-color: #FFFFFF;
    color: #2676C2;
    text-align: center;
    line-height: 200px;
    border-right-style: solid;
    border-color: #2676C2;
    border-width: 1px;
  }

  .el-main {
    background-color: #FFFFFF;
    color: #333;
    padding: 0px;
    margin: 0px;
  }

  .manual_header {
    background: #FFFFFF;
    line-height: 50px;
    height: 50px;
  }
  .main_box {
    height: 100%;
    margin: 5px 5px 5px 5px;
    border: 1px solid #999999;
    min-height: 140px;
  }
  .main_content {
    margin: 10px 20px;
  }


</style>
